<template>
        <div class="father">
            <h4>父组件</h4>
            <h4>{{ username }}</h4>
            <h4>{{ pasword }}</h4>
            <!-- v-model用在标签上 -->
            <!-- <input type="text" v-model="username"> -->
            <!--原始实现  -->
            <!-- <input type="text" :value="username" @input="username = ($event.target as HTMLInputElement).value"> -->

            <!-- v-model用在组件标签上 -->
            <!-- <school v-model="username"/> -->

             <!--modelValue传值  UI组件库写法-->
            <!-- <school :modelValue="username"
             @update:modelValue="username = $event"/> -->

             <!-- 修改modelValue -->
            <school v-model:username="username" v-model:pasword="pasword"/>

        </div>
</template>
    
<script setup lang='ts'>
import school from './school.vue';
import { ref } from 'vue';
let username = ref('zhangsan')
    let pasword = ref('123456')
</script>
    
<style scoped>
        .father{
        width: 80%;
        padding: 20px;
        background-color: bisque;
        font-size: 17px;
        border-radius: 5px;
    }
</style>